<!-- 歌单列表详情页 -->
<template>
	<view class="content">
		<view class="playListDetail">
			<!-- 顶部搜索栏 -->
			<view class="search-bar">
				<view class="search-bar-back" @click="goBack">
					<u-icon name="arrow-leftward" color="#fff" size="44"></u-icon>
				</view>
				<view class="title">
					歌单
				</view>
				<view class="search">
					<u-icon name="search" color="#fff" size="44"></u-icon>
				</view>
				<view class="list">
					<u-icon name="more-dot-fill" color="#fff" size="44"></u-icon>
				</view>
			</view>
			<!-- 歌单介绍 -->
			<view class="listDetail">
				<view class="listDetail-left">
					<u-image width="100%" :src="this.playList.coverImgUrl" mode="widthFix"></u-image>
				</view>
				<view class="listDetail-right">
					<view class="listDetail-right-title">
						{{this.playList.name}}
					</view>
					<view class="listDetail-right-auth" v-if="this.playList.creator">
						<u-image style="margin-top: 10rpx;" width="18%" :src="this.playList.creator.avatarUrl" mode="widthFix" shape="circle"></u-image>
						<view class="listDetail-right-auth-nikeName">
							{{this.playList.creator.nickname}}
						</view>
						<u-icon name="arrow-right" color="#d6c4ba" size="24" style="margin-left: 10rpx;"></u-icon>
					</view>
					<view class="listDetail-right-description">
						<view class="listDetail-right-description-text">
							{{this.playList.description}}
						</view>
						<u-icon name="arrow-right" color="#d6c4ba" size="30"></u-icon>
					</view>
				</view>
			</view>
			<!-- 歌单操作 -->
			<view class="listEdit">
				<view class="listEdit-pinglun">
					<u-icon name="chat" color="#fff" size="50"></u-icon>
					<view>27</view>
				</view>
				<view class="listEdit-share">
					<u-icon name="share" color="#fff" size="50"></u-icon>
					<view>175</view>
				</view>
				<view class="listEdit-download">
					<u-icon name="download" color="#fff" size="50"></u-icon>
					<view>下载</view>
				</view>
				<view class="listEdit-chose">
					<u-icon name="checkmark-circle" color="#fff" size="50"></u-icon>
					<view>多选</view>
				</view>
			</view>
		</view>
		<!-- 歌曲列表 -->
		<view class="musicList">
			<!-- 歌曲top -->
			<view class="musicList-top">
				<view class="musicList-top-left">
					<u-icon :name="playIcon" color="#393939" size="70" @click="playClick"></u-icon>
					<view class="musicList-top-left-text" v-if="playList.tracks">
						播放全部
						<text>{{`(共${playList.tracks.length}首)`}}</text>
					</view>
				</view>
				<view class="musicList-top-right">
					<u-button shape="circle" type="error" :ripple="true">+ 收藏({{playList.subscribedCount}})</u-button>
				</view>
			</view>
			<!-- 歌曲 -->
			<view class="musicItem" v-for="(item,index) in playList.tracks" :key='index' @click="musicItemClick(item)">
				<navigator url=".../">
					<view class="musicItem-index">
						{{index + 1 }}
					</view>
					<view class="musicItem-name">
						<view class="musicItem-name-mainTitle">
							{{item.name}}
							<text v-if="item.tns">
								({{ ...item.tns }})
							</text>
						</view>
						<view class="musicItem-name-auth">
							{{item.ar[0].name}}
							<template v-if="item.ar[1]">
								/{{item.ar[1].name}}
							</template>
							<template>
								-{{item.al.name}}
							</template>
						</view>
					</view>
					<view class="musicItem-video">
						<!-- <u-icon :name="playIcon" color="#b6b6b6" size="50"></u-icon> -->
					</view>
					<view class="musicItem-menu">
						<u-icon name="more-dot-fill" color="#b6b6b6" size="50"></u-icon>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 音乐底部栏 -->
		<musicBar :bgcolor='`#fff`' :playListId = 'playListId' :musicInfo='musicInfo' v-if='musicInfo' />
	</view>
</template>

<script>
	import musicBar from "@/components/musicBar.vue"
	export default {
		components: {
			musicBar
		},
		data() {
			return {
				playIcon: 'play-circle',
				isPlay: false,
				playList: {},
				musicInfo: null,
				// 歌单 ID
				playListId: ''
			}
		},
		watch: {
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.getPlaylistDetail(option.playListId);
			this.playListId = option.playListId;
		},
		onReady: function() {

		},
		methods: {
			// 获取歌单详情
			getPlaylistDetail(id) {
				this.myRequest({
					url: this.api.playlistDetail,
					data: {
						id: id
					}
				}).then(res => {
					// console.log(res.data.playlist);
					this.playList = res.data.playlist;
				})
			},

			// 单曲点击事件
			musicItemClick(val) {
				// 开启播放
				this.$store.commit('upDataPlayState', true);
				this.musicInfo = val;
			},

			goBack() {
				uni.reLaunch({
					url: '/pages/look/look'
				});
			},
			playClick() {
				this.isPlay = !this.isPlay;
				this.isPlay == false ? this.playIcon = 'play-circle' : this.playIcon = 'pause-circle'
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #e1ddda;
		height: auto;
		// margin-top: 350rpx;
	}

	.playListDetail {
		background-color: #795e4d;
		height: 100%;
		padding: 30rpx;
		position: relative;

		// 搜索部分
		.search-bar {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			position: fixed;
			top: 0rpx;
			left: 0;
			height: 160rpx;
			padding-top: 60rpx;
			padding-left: 30rpx;
			background-color: #795e4d;
			z-index: 100;

			.search-bar-back {
				width: 10%;
			}

			.title {
				color: white;
				font-size: 40rpx;
			}

			.search {
				margin-left: 58%;
			}

			.list {
				margin-left: 5%;
				transform: rotate(90deg);
			}
		}

		// 歌单介绍
		.listDetail {
			height: 260rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 160rpx;

			.listDetail-left {
				width: 37%;
				height: 100%;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.listDetail-right {
				width: 58%;
				height: 100%;

				.listDetail-right-title {
					color: #fff;
					font-weight: bold;
					font-size: 30rpx;
				}

				.listDetail-right-auth {
					margin-top: 10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.listDetail-right-auth-nikeName {
						color: #e8e3d0;
						margin-left: 20rpx;
					}
				}

				.listDetail-right-description {
					margin-top: 10rpx;
					color: #d6c4ba;
					display: flex;
					justify-content: space-between;

					.listDetail-right-description-text {
						// 文字过长自动换行
						word-break: break-all;
						white-space: normal;
						font-size: 24rpx;
						text-align: left;
						// 文字过长，显示省略号
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
		}

		// 歌单操作
		.listEdit {
			height: 90rpx;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 60rpx;

			.listEdit-pinglun,
			.listEdit-share,
			.listEdit-download,
			.listEdit-chose {
				width: 20%;
				height: 100%;
				text-align: center;

				view {
					color: #fff;
				}
			}
		}
	}

	// 歌曲列表
	.musicList {
		// height: 900rpx;
		background-color: #fff;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		margin-top: -60rpx;
		overflow: hidden;
		margin-bottom: 100rpx;
		position: sticky;
		top: 80rpx;

		.musicList-top {
			margin-top: 10rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.musicList-top-left {
				display: flex;
				align-items: center;

				.musicList-top-left-text {
					margin-left: 20rpx;
					font-size: 32rpx;
					font-weight: 600;

					text {
						color: #c0c0c0;
					}
				}
			}
		}

		.musicItem {
			height: 140rpx;
			padding: 20rpx;

			navigator {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.musicItem-index {
				width: 70rpx;
				text-align: center;
				color: #a0a0a0;
				margin-right: 2%;
			}

			.musicItem-name {
				width: 65%;

				.musicItem-name-mainTitle {
					color: #292929;
					font-weight: 700;
					font-family: 'NSimSun';

					text {
						color: #a0a0a0;
						margin-left: 10rpx;
					}
				}

				.musicItem-name-auth {
					color: #888888;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}

			.musicItem-video {
				width: 14%;
				text-align: center;
			}

			.musicItem-menu {
				transform: rotate(90deg);
			}

		}
	}
</style>
